import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, message } from 'antd';
import Logo from '@/assets/img/navigation_logo_default.png';
import styles from './index.module.less';
import { login } from '../../service';
import MyLocalStorage from '@/utils/Mylocalstorage';
import { USER_KEY } from '@/constants';

import { permissionList } from '@/mock/permissionList';
import { initColumns } from  '@/config/columns'
export const LoginForm = () => {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const onFinish = async (values: Login) => {
    try {
      setLoading(true);
      const userInfo: any = await login(values);
      MyLocalStorage.localstorage.setItem(USER_KEY, userInfo);
      initColumns()
      message.success('登录成功');
      navigate('/management');
    } catch (error) {
      console.log(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className={styles.container}>
      <img src={Logo} alt="" height={50} />
      <h2 className={styles.title}>资产上报管理平台</h2>
      <Form
        name="login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        autoComplete="off"
      >
        <Form.Item name="userName" rules={[{ required: true, message: '请输入用户名' }]}>
          <Input
            prefix={<UserOutlined className={styles['site-form-item-icon']} />}
            placeholder="请输入用户名"
            maxLength={20}
          />
        </Form.Item>
        <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
          <Input.Password
            prefix={<LockOutlined className={styles['site-form-item-icon']} />}
            type="password"
            placeholder="请输入密码"
            maxLength={20}
          />
        </Form.Item>
        <Form.Item>
          <Button loading={loading} type="primary" htmlType="submit" className={styles['login-form-button']} block>
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};
